<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<style>
	.border-lavener{
		border: 1px solid #e6e6fa;
	}
	
	.musicContainer{
		max-width: none!important;
		width: 940px;
	}
	
	.titleSection{
		position: relative;
		min-height: 30px;
		border: 1px solid #e6e6fa;
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 5px;
		margin-bottom: 5px;
		background-color: #f5f5f5;
	}
	
	.contentSection{
		height: 420px;	
	}

	.musicContainer:before, .musicContainer:after,
	.titleSection:before, .titleSection:after,
	.contentSection:before, .contentSection:after{
		content: " ";
		display: table;
	}
	:before, :after{
		box-sizing: border-box;
	}
	.musicContainer:after, .titleSection:after,
	.contentSection.after{
		clear: both;
	}
</style>
<script type="text/javascript">
	// 댓글을 추가하기위한 함수
	function createComment(data){
		$("#commentArea").append("<tr comment-no='"+data.no+"' comment-id='"+data.memberVO.id+"'>"
				+"<td class='border-lavener' style='padding: 5px;'>"
				+"<div>"
				+"<img src='${initParam.memberPhotoPath }"+data.memberVO.picturePath+"' width='24px' height='24px'>"
				+data.memberVO.nickname
				+"&nbsp;<span>"+data.date+"</span>"
				+"</div>"
				+"<div name='content'>"
				+"<pre style='border: 0px;'>"+data.content+"</pre>"
				//+data.content
				+"</div>"
				+"<div name='control' style='float: right;'>"
				+"</div>"
				+"</td>"
				+"</tr>");
		if("${sessionScope.mvo.id}" == data.memberVO.id){
			$("#commentArea").children().last().children().children("div[name=control]").append("<button id=updateComment>수정</button><button id=deleteComment>삭제</button>");
		}
	}
	
	// 댓글 버튼을 초기화를 위한 함수
	function resetComment(){
		$("#commentArea").children().each(function(){
			var $content = $(this).children().children("div[name=content]").children("textarea");
			$content.parent().html($content.text()); 
			$(this).children().children("div[name=control]").empty();
			if("${sessionScope.mvo.id}" == $(this).attr("comment-id")){
				$(this).children().children("div[name=control]").html("<button id=updateComment>수정</button><button id=deleteComment>삭제</button>");
			}
		});
	}
	
	$(function(){
		// 더보기를 위한 변수
		var morePaging = 2;
		if(${param.fileError == true}){
			alert("파일이 존재하지않습니다.");
			var url = location.href;
			location.href = url.substring(0, url.indexOf("&fileError")); 
		}
		$.ajax({
			type:"post",
			url:"musicboard_pagingComment.ju",
			data:"nowPage=1&boardNo="+${mbvo.no },
			dataType:"json",
			success:function(json){
				if(json.list.length>0){
					$("#commentArea").empty();
				}
				
				$.each(json.list, function(i, data){
					createComment(data);
				});//each
				
				if(json.pagingBean.nowPage >= json.pagingBean.totalPage){
					$("#moreShowBtnArea").empty();
				}
			}
		});//comment ajax
		
		$("#moreShowBtn").click(function(){
			$.ajax({
				type:"post",
				url:"musicboard_pagingComment.ju",
				data:"nowPage="+morePaging+"&boardNo="+${mbvo.no },
				dataType:"json",
				beforeSend:function(){
					resetComment();
				},
				success:function(json){
					morePaging++;
					
					$.each(json.list, function(i, list){
						createComment(list);
					});//each
					
					if(json.pagingBean.nowPage >= json.pagingBean.totalPage){
						$("#moreShowBtnArea").empty();
					}
				}
			});//more ajax
		});//moreComment click
		
		$("#updateBtn").click(function(){
			if(!confirm("글을 수정 하시겠습니까?")){
				return;
			}
			location.href = "musicboard_goUpdateContent.ju?no="+${mbvo.no };
		});//updateBtn click
		
		$("#deleteBtn").click(function(){
			if(!confirm("글을 삭제 하시겠습니까?")){
				return;
			}
			location.href = "musicboard_deleteContent.ju?no="+${mbvo.no };
		});//updateBtn click
		
		$("#commentWriteBtn").click(function(){
			if(!$("#commentContent").val()){
				alert("댓글을 입력하세요");
				return;
			}
			
			$.ajax({
				type:"post",
				url:"musicboard_writeComment.ju",
				data:"boardNo="+${mbvo.no }+"&content="+encodeURIComponent($("#commentContent").val())+"&memberVO.id=${sessionScope.mvo.id}",
				dataType:"json",
				success:function(json){
					$("#commentArea").empty();
					$("#commentContent").val("");
					$.each(json, function(i, list){
						createComment(list);
					});//each
					
					$("#moreShowBtnArea").empty();
				}
			});//ajax
		});//commentWriteBtn click
		
		$("#commentArea").on("click", "#deleteComment", function(){
			var commentNo = $(this).parents("tr").attr("comment-no");
			
			if(confirm("댓글을 삭제하시겠습니까?")){
				$.ajax({
					type:"post",
					url:"musicboard_deleteComment.ju",
					data:"no="+commentNo+"&boardNo="+${mbvo.no },
					dataType:"json",
					success:function(json){
						morePaging = 2;
						$("#commentArea").empty();
			
						if(json.list.length<=0){
							$("#commentArea").html(
									"<tr>"
									+"<td align=center class=border-lavener>댓글이 없습니다.</td>"
									+"</tr>"		
							);
						}
						
						$.each(json.list, function(i, list){
							createComment(list);
						});//each
						
						if(json.pagingBean.nowPage >= json.pagingBean.totalPage){
							$("#moreShowBtnArea").empty();
						}
					}
				});//ajax
			}
		});//deleteComment click
		
		$("#commentArea").on("click", "#updateComment", function(){
			var $content = $(this).parents("td").children("div[name=content]");
			var $control = $(this).parents("td").children("div[name=control]");
			// 모든 댓글 수정 삭제버튼 제거
			$("#commentArea").children().each(function(){
				$(this).children().children("div[name=control]").empty();
			}); 
			
			$content.html("<textarea style='width: 100%'>"+$content.text()+"</textarea>");
			$control.html("<button id=updateCommentContent>입력</button><button id=updateCancle>취소</button>");
		});//updateComment click
		
		$("#commentArea").on("click", "#updateCancle", function(){
			resetComment();
		});//updateCancle click
		
		$("#commentArea").on("click", "#updateCommentContent", function(){
			var $content = $(this).parents("td").children("div[name=content]").children();
			var commentNo = $(this).parents("tr").attr("comment-no");
			
			if(!$content.val()){
				alert("댓글을 입력하세요");
				return;
			}
			
			$.ajax({
				type:"post",
				url:"musicboard_updateComment.ju",
				data:"content="+$content.val()+"&no="+commentNo,
				dataType:"json",
				success:function(json){
					$content.parent().html("<pre style='border: 0px;'>"+json.content+"</pre>");
					resetComment();
				}
			});
		});//updateCommentContent click
		
		$("#likeBtn").click(function(){
			$.ajax({
				type:"post",
				url:"musicboard_updateLike.ju",
				data:"boardNo="+${mbvo.no},
				dataType:"json",
				success:function(json){
					alert(json.msg);
					$("#likeCnt").text(json.likeCnt);
				}
			});
		});// likeBtn click
		
		$("#downloadBtn").click(function(){
			var newFile = $(":input[name=newFile]").val();
			var orgFile = $(":input[name=orgFile]").val();
			location.href = "fileDownload.ju?newFile="+newFile+"&orgFile="+orgFile;
		});//downloadBtn click
		
		$("#selectPlayListBtn").click(function(){
			//$(".modal").attr("aria-hidden", "false");
			$(".modal").modal();
			
			if(${sessionScope.mvo != null}){
				$.ajax({
					type:"post",
					url:"playlist_ajaxPlayList.ju",
					dataType:"json",
					success:function(json){
						if(json.length>0){
							$(".modal-body").empty();
							$(".modal-body").append("<select class='form-control'>");
							$.each(json, function(i, data){
								$(".modal-body select").append("<option value="+data.PLAYLIST_NO+">"+data.PLAYLIST_NAME+"</option>");
							});
						}else{
							$("#addMusicListBtn").css("display", "none");
						}
					}
				});
			}
			
		});//selectPlayListBtn click
		
		$("#addMusicListBtn").click(function(){
			$.ajax({
				type:"post",
				url:"playlist_addMusicList.ju",
				data:"musicboard_no=${mbvo.no}&playlist_no="+$(".modal-body select").val(),
				dataType:"json",
				success:function(json){
					if(json == true){
						alert($(".modal-body select option[value="+$(".modal-body select").val()+"]").text()+"에 추가되었습니다.");
					}else{
						alert("이미 추가된 음악입니다.");
					}
				}
			});
		});
	});//ready
</script>
<c:set value="${requestScope.mbvo }" var="mbvo"/>

<div class="modal fade">
	  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color: #000000">×</button>
        <h4 class="modal-title">플레이리스트에 추가</h4>
      </div>
      <div class="modal-body">
      	<c:choose>
      		<c:when test="${sessionScope.mvo == null }">
      			<p>로그인이 필요합니다.</p>
      		</c:when>
      		<c:otherwise>
      			<p>플레이리스트가 존재하지 않습니다.</p>
      		</c:otherwise>
      	</c:choose>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
        <c:if test="${sessionScope.mvo != null }">
        	<button type="button" class="btn btn-primary" id="addMusicListBtn">추가</button>
        </c:if>
      </div>
    </div>
  </div>
</div>

<div class="musicContainer">
	<div class="titleSection">
		<strong>[${mbvo.genre }] ${mbvo.title }</strong>
		<span style="float: right;">${mbvo.date }</span>
	</div>
	
	<div class="titleSection">
		<img src="${initParam.memberPhotoPath }${mbvo.memberVO.picturePath }" width="24px" height="24px">${mbvo.memberVO.nickname }
		<span style="float: right;">조회수 ${mbvo.hit } 추천수 <span id="likeCnt">${mbvo.like }</span></span>
	</div>
	
	<div class="contentSection" >
		<div class="border-lavener" style="float:left; margin-bottom: 20px; margin-right: 10px; width: 40%">
			<table >
				<tr>
					<td><img src="${initParam.albumartPath }${mbvo.pictureFile }" height="390px" width="100%" style="min-width: 376px"></td>
				</tr>
				<tr>
					<td>
						<audio controls loop style="width: 100%">
						  <source src="${initParam.audioPath }${mbvo.newFile}" type="audio/mpeg"></source>
						</audio>		
					</td>
				</tr>
			</table>
		</div>
		<div style="float: right; width: 58.8999%; height: 100%">
			<table style="width: 553px; height: 100%">
				<tr>
					<th class="titleSection">내용</th>
				</tr>
				<tr style="height: 80%">
					<td class="border-lavener"><pre style="height: 100%; width: 552px; background-color: #FFFFFF; border: 0px;">${mbvo.content }</pre></td>
				</tr>
				<tr>
					<td class="border-lavener">
						<button id="downloadBtn">다운로드</button>
						<button id="likeBtn">좋아요乃</button>
						<button id="selectPlayListBtn">플레이리스트+</button>
						<span style="float: right">
							<c:if test="${sessionScope.mvo.id == mbvo.memberVO.id }">
								<button id="updateBtn">수정</button>
							</c:if>
							<c:if test="${sessionScope.mvo.grade == 'admin' || sessionScope.mvo.id == mbvo.memberVO.id }">
								<button id="deleteBtn">삭제</button>
							</c:if>
						</span>
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<div>
	<div style="clear:both">
		<table style="width: 100%">
			<thead>
				<tr>
					<th class="titleSection">댓글</th>
				</tr>
			</thead>
			<tbody id="commentArea">
				<tr>
					<td align="center" class="border-lavener">댓글이 없습니다.</td>
				</tr>
			</tbody>
		</table>
		<div id="moreShowBtnArea">
			<button type="button" id="moreShowBtn" class="btn btn-default" style="width: 100%">더보기</button>
		</div>
	</div>
	<c:if test="${sessionScope.mvo != null }">
	<div>
		<table style="width: 100%">
			<thead>
				<tr>
					<th class="titleSection">댓글 쓰기</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="border-lavener">
						<textarea id="commentContent" cols="90" rows="5" maxlength="2000" style="height: 120px; float: left; resize:none;"></textarea> 
						<span><button id="commentWriteBtn" class="btn btn-default btn-lg" style="height: 120px; margin: 0px 2px;">등록</button></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	</c:if>
</div>
<input type="hidden" name="newFile" value="${mbvo.newFile}">
<input type="hidden" name="orgFile" value="${mbvo.orgFile}">
<br>
<br>